<template>
  <div>
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
    <h1>职业: {{ job.type }}</h1>
    <h1>薪资: {{ job.salary}}</h1>
    <h1>job中c值为: {{ job.a.b.c }}</h1>
    <h1>爱好: {{  job.love }}</h1>
    <button @click="change">响应式修改</button>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  name: "App",
  setup() {
  
    //基本数据类型以ref实现响应式，对象数组类型通过reactive实现响应式
    /**
     * ref函数
     *   1.接收的数据可以是：基本类型、也可以是对象类型。
         2.基本类型的数据：响应式依靠的是类上的getter与setter完成的
         3.对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。
        读取: 
          JS中操作数据： xxx.value
          模板中读取数据: 不需要.value


       reactive函数
            * 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
            * 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
            * reactive定义的响应式数据是“深层次的”。
            * 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

     * 
     */
    let name = ref("张三");
    let age = ref(25);
    let job = reactive({
      type: "前端工程师",
      salary: "6K",
      a:{
        b:{
          c: 66666
        }
      },
      love: ['抽烟', '喝酒', '打牌']
    });

    function change() {
      name.value = "李四";
      age.value += 1;
      job.type = "UI工程师";
      job.salary = "10k";
      job.a.b.c = 99999;
      job.love[0] = '学习';
    }

    return {
      name,
      age,
      job,
      change
    };
  }
};
</script>
